<template>
    <div>
        <div class="head-box">
            <div class="logo-box">
                <img src="@/assets/img/logo.png" width="160" alt="">
            </div>
            <div class="sub-box">
                <a href="#">{{ linkInfo }}</a>
                <el-button style="width: 100px;" @click="isSubLine = !isSubLine"
                           type="outline-primary">{{ btnInfo }}
                </el-button>
            </div>
        </div>

        <div class="body-box">
            <el-row>
                <el-col :span="12">
                    <div class="login-img-box">
                        <transition name="el-fade-in-linear">
                            <img class="login-img" v-show="!isSubLine" src="@/assets/img/img1.png" width="750" alt="">
                        </transition>
                        <transition name="el-fade-in-linear">
                            <img class="subline-img" v-show="isSubLine" src="@/assets/img/img2.png" width="650" alt="">
                        </transition>
                    </div>

                </el-col>
                <el-col :span="12">
                    <login-input-view @callLoginSuccess="handleLoginSuccess" v-show="!isSubLine"></login-input-view>
                    <subline-view-step1 v-show="isSubLine"></subline-view-step1>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import LoginInputView from '@/components/login/LoginInputView.vue'
import SublineViewStep1 from '@/components/login/SublineViewStep1.vue'
import LOCAL from "@/main"

export default {
    emits: ["callLoginSuccess"],
    name: 'loginView',
    components: {
        LoginInputView,
        SublineViewStep1
    },
    data() {
        return {
            isSubLine: false,
            LOCAL,
            active: 1,
            // eslint-disable-next-line no-undef
            btnInfo: DICTIONARY['zh-cn'].loginInfo.login,
            // eslint-disable-next-line no-undef
            loginBtnInfo: DICTIONARY['zh-cn'].loginInfo.register,
            // eslint-disable-next-line no-undef
            sublineBtnInfo: DICTIONARY['zh-cn'].loginInfo.login,
            // eslint-disable-next-line no-undef
            linkInfo: DICTIONARY['zh-cn'].loginInfo.dontHaveAccount,
            loginInfo: {
                // eslint-disable-next-line no-undef
                title: DICTIONARY['zh-cn'].loginInfo.login,
                // eslint-disable-next-line no-undef
                username: DICTIONARY['zh-cn'].loginInfo.username,
                // eslint-disable-next-line no-undef
                password: DICTIONARY['zh-cn'].loginInfo.password,
                // eslint-disable-next-line no-undef
                forgetPassword: DICTIONARY['zh-cn'].loginInfo.forgetPassword,
                // eslint-disable-next-line no-undef
                rememberPassword: DICTIONARY['zh-cn'].loginInfo.rememberPassword,
                // eslint-disable-next-line no-undef
                dontHaveAccount: DICTIONARY['zh-cn'].loginInfo.dontHaveAccount,
                // eslint-disable-next-line no-undef
                hasAccount: DICTIONARY['zh-cn'].loginInfo.hasAccount,
                // eslint-disable-next-line no-undef
                register: DICTIONARY['zh-cn'].loginInfo.register,

            }
        }
    },
    watch: {
        isSubLine() {
            if (this.isSubLine) {
                this.linkInfo = this.loginInfo.hasAccount;
                this.btnInfo = this.sublineBtnInfo;
            } else {
                this.linkInfo = this.loginInfo.dontHaveAccount;
                this.btnInfo = this.loginBtnInfo;
            }
        }
    },
    methods: {
        next() {
            this.active++;
            if (this.active > 1) {
                this.active = 0;
            }
        },
        handleLoginSuccess(data) {
            LOCAL.IS_LOGIN = false;
            this.$router.push("/");
            console.log(data,">>>>>拿到的data")
            LOCAL.USER_INF = data.user;
            this.$emit("callLoginSuccess", data);
        }
    },
    mounted() {
        LOCAL.IS_LOGIN = true;
    }
}
</script>
<style scoped>
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.step-box {
    position: absolute;
    display: block;
    width: 750px;
    bottom: 10%;

}

.head-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
}

.sub-box a {
    position: relative;
    /* 不显示下划线 */
    text-decoration: none;
    color: #405578;
    right: 40px;
}

.login-img-box {
    position: relative;
    height: 700px;
    width: auto;
    overflow: hidden;
    top: 30px;

}

.login-img {
    position: relative;
    width: 900px;
    top: 0px;
}

.subline-img {
    position: relative;
    width: 600px;
}</style>